<template>
  <view>
    <view v-if="isload">
      <view class="dialog-mask" @tap="detaildialogChange"></view>
      <view class="close" @tap="detaildialogChange">
        <image src="/static/img/close.png" class="image" />
      </view>
      <view
        class="dialog"
        :class="menuindex > -1 ? 'tabbarbot' : 'notabbarbot'"
      >
        <view class="container">
          <scroll-view
            @scroll="scroll"
            :scrollIntoView="scrollToViewId"
            :scrollTop="scrollTop"
            :scroll-y="true"
            style="height: 100%; overflow: scroll"
          >
            <view id="scroll_view_tab0">
              <view class="swiper-container" v-if="isplay == 0">
                <swiper
                  class="swiper"
                  :indicator-dots="false"
                  :autoplay="true"
                  :interval="5000"
                  @change="swiperChange"
                >
                  <block v-for="(item, index) in product.pics" :key="index">
                    <swiper-item class="swiper-item">
                      <view class="swiper-item-view">
                        <image
                          class="img"
                          :src="item"
                          mode="widthFix"
                          @tap="previewImage"
                          :data-url="item"
                          :data-urls="product.pics.join(',')"
                        />
                      </view>
                    </swiper-item>
                  </block>
                </swiper>
                <view class="imageCount"
                  >{{ current + 1 }}/{{ product.pics.length }}</view
                >
                <view v-if="product.video" class="provideo" @tap="payvideo">
                  <image src="/static/img/video.png" />
                  <view class="txt">{{ product.video_duration }}</view>
                </view>
              </view>
              <view class="videobox" v-if="isplay == 1">
                <video
                  autoplay="true"
                  class="video"
                  id="video"
                  :src="product.video"
                ></video>
                <view class="parsevideo" @tap="parsevideo">退出播放</view>
              </view>

              <view
                class="cuxiaopoint cuxiaoitem"
                v-if="showtoptabbar == 1 && couponlist.length > 0"
                style="background: #fff; padding: 0 16rpx"
              >
                <view class="f1" @tap="showcuxiaodetail">
                  <view
                    v-for="(item, index) in couponlist"
                    :key="index"
                    class="t"
                    :style="{
                      background: 'rgba(' + t('color1rgb') + ',0.1)',
                      color: t('color1'),
                    }"
                  >
                    <text class="t0" style="padding: 0 6px">券</text
                    ><text class="t1">{{ item.name }}</text>
                  </view>
                </view>
                <view class="f2" @tap="showcuxiaodetail">
                  <image src="/static/img/arrow-point.png" mode="widthFix" />
                </view>
              </view>

              <view
                style="
                  background: #fff;
                  width: 100%;
                  height: auto;
                  padding: 20rpx 20rpx 0;
                "
                v-if="shopset.detail_guangao1"
              >
                <image
                  :src="shopset.detail_guangao1"
                  style="width: 100%; height: auto"
                  mode="widthFix"
                  v-if="shopset.detail_guangao1"
                  @tap="showgg1Dialog"
                />
              </view>
              <uni-popup
                id="gg1Dialog"
                ref="gg1Dialog"
                type="dialog"
                v-if="shopset.detail_guangao1 && shopset.detail_guangao1_t"
              >
                <image
                  :src="shopset.detail_guangao1_t"
                  @tap="previewImage"
                  :data-url="shopset.detail_guangao1_t"
                  class="img"
                  mode="widthFix"
                  style="width: 600rpx; height: auto; border-radius: 10rpx"
                />
                <view class="ggdiaplog_close" @tap="closegg1Dialog">
                  <image
                    src="/static/img/close2.png"
                    style="width: 100%; height: 100%"
                  />
                </view>
              </uni-popup>

              <view class="header">
                <block v-if="product.price_type != 1 || product.min_price > 0">
                  <view
                    v-if="
                      sysset.price_show_type == '0' || !sysset.price_show_type
                    "
                  >
                    <view class="price_share">
                      <view class="price">
                        <view class="f1 flex-s" :style="{ color: t('color1') }">
                          <block
                            v-if="showprice_dollar && product.usdmin_price != 0"
                          >
                            <text style="margin-right: 20rpx"
                              ><text style="font-size: 36rpx">$</text
                              >{{ product.usdmin_price
                              }}<text
                                v-if="
                                  product.usdmax_price != product.usdmin_price
                                "
                                >-{{ product.usdmax_price }}</text
                              ></text
                            >
                            <text style="font-size: 40rpx"
                              ><text style="font-size: 32rpx">￥</text
                              >{{ product.min_price
                              }}<text
                                v-if="product.max_price != product.min_price"
                                >-{{ product.max_price }}</text
                              ></text
                            >
                          </block>
                          <block v-else>
                            <text style="font-size: 36rpx">￥</text
                            >{{ product.min_price
                            }}<text
                              v-if="product.max_price != product.min_price"
                              >-{{ product.max_price }}</text
                            >
                          </block>
                          <block v-if="show_money_price">
                            <view
                              class="moneyprice"
                              :style="
                                'color:' +
                                t('color1') +
                                ';background:rgba(' +
                                t('color1rgb') +
                                ',0.2)'
                              "
                            >
                              {{ t("余额") }}
                            </view>
                          </block>
                        </view>
                        <view
                          class="f2"
                          v-if="
                            product.market_price * 1 > product.sell_price * 1
                          "
                        >
                          ￥{{ product.market_price
                          }}<text v-if="product.max_price != product.min_price"
                            >起</text
                          ></view
                        >
                      </view>
                      <!--<view class="share" @tap="shareClick">
												<image class="img" src="/static/img/share.png" /><text class="txt">分享</text>
											</view>-->
                    </view>
                  </view>

                  <view
                    v-if="
                      sysset.price_show_type == '2' ||
                      sysset.price_show_type == '1'
                    "
                  >
                    <view v-if="product.is_vip == '1'">
                      <view class="flex" v-if="product.lvprice == '1'">
                        <view
                          class="member flex"
                          :style="'border-color:' + t('color1')"
                        >
                          <view
                            :style="{ background: t('color1') }"
                            class="member_lable flex-y-center"
                          >
                            {{ product.level_name }}
                          </view>
                          <view
                            :style="'color:' + t('color1')"
                            class="member_value"
                          >
                            <text
                              :style="
                                product.lvprice == '1'
                                  ? 'font-size:36rpx'
                                  : 'font-size:26rpx'
                              "
                              >￥</text
                            >
                            <text
                              :style="
                                product.lvprice == '1'
                                  ? 'font-size:50rpx'
                                  : 'font-size:26rpx'
                              "
                              >{{ product.sell_price }}</text
                            >
                          </view>
                        </view>
                      </view>
                      <view class="price_share" style="height: auto">
                        <view class="price">
                          <view
                            class="f1 flex-s"
                            :style="{ color: t('color1') }"
                          >
                            <block v-if="showprice_dollar && usdmin_price">
                              <text style="margin-right: 20rpx"
                                ><text
                                  style="font-size: 30rpx"
                                  v-if="product.usdmin_price"
                                  >$</text
                                >{{ product.usdmin_price
                                }}<text
                                  v-if="
                                    product.usdmax_price != product.usdmin_price
                                  "
                                  >-{{ product.usdmax_price }}</text
                                ></text
                              >
                              <text style="font-size: 44rpx"
                                ><text style="font-size: 22rpx">￥</text
                                >{{ product.min_price
                                }}<text
                                  v-if="product.max_price != product.min_price"
                                  >-{{ product.max_price }}</text
                                ></text
                              >
                            </block>
                            <block v-else>
                              <text>
                                <text
                                  :style="
                                    product.lvprice == '1'
                                      ? 'font-size:26rpx'
                                      : 'font-size:36rpx'
                                  "
                                  >￥</text
                                >
                                <text
                                  :style="
                                    product.lvprice == '1'
                                      ? 'font-size:26rpx'
                                      : 'font-size:50rpx'
                                  "
                                  >{{ product.min_price }}</text
                                >
                              </text>
                            </block>
                            <block v-if="show_money_price">
                              <view
                                class="moneyprice"
                                :style="
                                  'color:' +
                                  t('color1') +
                                  ';background:rgba(' +
                                  t('color1rgb') +
                                  ',0.2)'
                                "
                              >
                                {{ t("余额") }}
                              </view>
                            </block>
                          </view>
                          <!-- <view class="f2" v-if="product.market_price*1 > product.sell_price*1">￥{{product.market_price}}<text v-if="product.max_price!=product.min_price">起</text></view> -->
                        </view>
                        <view class="share" @tap="shareClick">
                          <image class="img" src="/static/img/share.png" /><text
                            class="txt"
                            >分享</text
                          >
                        </view>
                      </view>
                    </view>
                    <view v-if="product.is_vip == '0'">
                      <view class="price_share">
                        <view class="price">
                          <view
                            class="f1 flex-s"
                            :style="{ color: t('color1') }"
                          >
                            <block v-if="showprice_dollar">
                              <text style="margin-right: 20rpx"
                                ><text style="font-size: 36rpx">$</text
                                >{{ product.usdmin_price
                                }}<text
                                  v-if="
                                    product.usdmax_price != product.usdmin_price
                                  "
                                  >-{{ product.usdmax_price }}</text
                                ></text
                              >
                              <text
                                ><text style="font-size: 32rpx">￥</text
                                ><text style="font-size: 40rpx">{{
                                  product.min_price
                                }}</text
                                ><text
                                  v-if="product.max_price != product.min_price"
                                  >-{{ product.max_price }}</text
                                ></text
                              >
                            </block>
                            <block v-else>
                              <text>
                                <text style="font-size: 36rpx">￥</text>
                                <text style="font-size: 50rpx">{{
                                  product.min_price
                                }}</text>
                              </text>
                            </block>
                            <block v-if="show_money_price">
                              <view
                                class="moneyprice"
                                :style="
                                  'color:' +
                                  t('color1') +
                                  ';background:rgba(' +
                                  t('color1rgb') +
                                  ',0.2)'
                                "
                              >
                                {{ t("余额") }}
                              </view>
                            </block>
                          </view>
                          <view
                            class="f2"
                            v-if="
                              product.market_price * 1 > product.sell_price * 1
                            "
                          >
                            ￥{{ product.market_price
                            }}<text
                              v-if="product.max_price != product.min_price"
                              >起</text
                            >
                          </view>
                        </view>
                        <view class="share" @tap="shareClick">
                          <image class="img" src="/static/img/share.png" /><text
                            class="txt"
                            >分享</text
                          >
                        </view>
                      </view>
                      <view
                        class="flex"
                        v-if="
                          sysset.price_show_type == '2' && product.lvprice == 1
                        "
                      >
                        <view
                          class="member flex"
                          :style="'border-color:' + t('color1')"
                        >
                          <view
                            :style="{ background: t('color1') }"
                            class="member_lable flex-y-center"
                          >
                            {{ product.level_name }}
                          </view>
                          <view
                            :style="'color:' + t('color1')"
                            class="member_value"
                          >
                            <text style="font-size: 26rpx">￥</text>
                            <text style="font-size: 26rpx">{{
                              product.vip_price
                            }}</text>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="points" v-if="product.points">
                    最高返{{ product.points }}{{ t("积分") }}
                  </view>
                  <view v-if="product.tags && product.tags.length > 0">
                    <text class="title-tags" v-for="item in product.tags">{{
                      item
                    }}</text>
                  </view>

                  <view class="title">
                    {{ product.name }}
                  </view>
                </block>
                <block v-else>
                  <view v-if="product.xunjia_text" class="price_share">
                    <view class="price">
                      <view class="f1" :style="{ color: t('color1') }">
                        <text style="font-size: 36rpx">询价</text>
                      </view>
                    </view>
                  </view>
                  <view class="price_share">
                    <view class="title">{{ product.name }}</view>
                    <view class="share" @tap="shareClick">
                      <image class="img" src="/static/img/share.png" /><text
                        class="txt"
                        >分享</text
                      >
                    </view>
                  </view>
                </block>

                <view class="sellpoint" v-if="product.sellpoint">{{
                  product.sellpoint
                }}</view>
                <!-- 								<view class="sales_stock" v-if="shopset.hide_sales != 1 || shopset.hide_stock != 1">
									<view class="f1" v-if="shopset.hide_sales != 1">销量：{{ product.sales }}
									</view>
									<view class="f2" v-if="shopset.hide_stock != 1">库存：{{ product.stock }}</view>
								</view> -->

                <view
                  class="commission"
                  :style="{
                    background: 'rgba(' + t('color1rgb') + ',0.1)',
                    color: t('color1'),
                  }"
                  v-if="product.isrefund == 1"
                >
                  注：该商品不允许退款
                </view>
              </view>

              <view class="cuxiaodiv" v-if="product.givescore > 0 && 0">
                <view class="cuxiaopoint">
                  <view class="f0">送{{ t("积分") }}</view>
                  <view class="f1" style="font-size: 26rpx"
                    >购买可得{{ t("积分") }}{{ product.givescore }}个
                  </view>
                </view>
              </view>

              <view
                class="cuxiaodiv"
                v-if="
                  (0 && couponlist.length > 0) || product.discount_tips != ''
                "
              >
                <view
                  class="cuxiaopoint cuxiaoitem"
                  v-if="product.discount_tips != ''"
                >
                  <view class="f0">折扣</view>
                  <view class="f1" style="padding-left: 10rpx">{{
                    product.discount_tips
                  }}</view>
                  <view
                    class="f2"
                    @tap="goto"
                    data-url="/pagesExt/my/levelinfo"
                  >
                    <image src="/static/img/arrow-point.png" mode="widthFix" />
                  </view>
                </view>
                <view
                  class="cuxiaopoint cuxiaoitem"
                  v-if="couponlist.length > 0 && showtoptabbar == 0"
                >
                  <view class="f0">优惠</view>
                  <view class="f1" @tap="showcuxiaodetail">
                    <view
                      v-for="(item, index) in couponlist"
                      :key="index"
                      class="t"
                      :style="{
                        background: 'rgba(' + t('color1rgb') + ',0.1)',
                        color: t('color1'),
                      }"
                    >
                      <text class="t0" style="padding: 0 6px">券</text
                      ><text class="t1">{{ item.name }}</text>
                    </view>
                  </view>
                  <view class="f2" @tap="showcuxiaodetail">
                    <image src="/static/img/arrow-point.png" mode="widthFix" />
                  </view>
                </view>
              </view>

              <view v-if="showfuwudialog" class="popup__container">
                <view class="popup__overlay" @tap.stop="hidefuwudetail"></view>
                <view class="popup__modal">
                  <view class="popup__title">
                    <text class="popup__title-text">服务</text>
                    <image
                      src="/static/img/close.png"
                      class="popup__close"
                      style="width: 36rpx; height: 36rpx"
                      @tap.stop="hidefuwudetail"
                    />
                  </view>
                  <view class="popup__content">
                    <view
                      v-for="(item, index) in fuwulist"
                      :key="index"
                      class="service-item"
                    >
                      <view class="fuwudialog-content">
                        <view class="f1">{{ item.name }}</view>
                        <text class="f2">{{ item.desc }}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>

              <view v-if="showcuxiaodialog" class="popup__container">
                <view
                  class="popup__overlay"
                  @tap.stop="hidecuxiaodetail"
                ></view>
                <view class="popup__modal">
                  <view class="popup__title">
                    <text class="popup__title-text">优惠促销</text>
                    <image
                      src="/static/img/close.png"
                      class="popup__close"
                      style="width: 36rpx; height: 36rpx"
                      @tap.stop="hidecuxiaodetail"
                    />
                  </view>
                  <view class="popup__content">
                    <view
                      v-for="(item, index) in cuxiaolist"
                      :key="index"
                      class="service-item"
                    >
                      <view class="suffix">
                        <view class="type-name"
                          ><text
                            style="
                              border-radius: 4px;
                              border: 1px solid #f05423;
                              color: #ff550f;
                              font-size: 20rpx;
                              padding: 2px 5px;
                            "
                            >{{ item.tip }}</text
                          >
                          <text style="color: #333; margin-left: 20rpx">{{
                            item.name
                          }}</text>
                        </view>
                      </view>
                    </view>
                    <couponlist
                      :couponlist="couponlist"
                      @getcoupon="getcoupon"
                    ></couponlist>
                  </view>
                </view>
              </view>
            </view>

            <view id="scroll_view_tab2">
              <!-- 自提商品附近门店S -->

              <!-- 自提商品附近门店E -->

              <block v-if="!isEmpty(product.paramdata)">
                <view class="detail_title">
                  <view class="t1"></view>
                  <view class="t2"></view>
                  <view class="t0">商品参数</view>
                  <view class="t2"></view>
                  <view class="t1"></view>
                </view>
                <view
                  style="background: #fff; padding: 20rpx 40rpx"
                  class="paraminfo"
                >
                  <view
                    v-for="(item, index) in product.paramdata"
                    class="paramitem"
                  >
                    <view class="f1">{{ index }}</view>
                    <view class="f2">{{ item }}</view>
                  </view>
                </view>
              </block>

              <view class="detail_title">
                <view class="t1"></view>
                <view class="t2"></view>
                <view class="t0">商品描述</view>
                <view class="t2"></view>
                <view class="t1"></view>
              </view>
              <view class="isloding" v-if="isLoding"> 图片加载中... </view>
              <view class="detail" v-else>
                <dp :pagecontent="pagecontent"></dp>
              </view>
            </view>

            <!-- <view style="width:100%;height:140rpx;"></view> -->
          </scroll-view>
        </view>
      </view>
    </view>
    <loading v-if="loading"></loading>
  </view>
</template>
<script>
var app = getApp();
var interval = null;
export default {
  data() {
    return {
      isLoding: true,
      isload: false,
      loading: false,

      menuindex: -1,
      pre_url: app.globalData.pre_url,
      static_url: app.globalData.static_url,
      textset: {},
      isload: false,
      buydialogShow: false,
      btntype: 1,
      isfavorite: false,
      current: 0,
      isplay: 0,
      showcuxiaodialog: false,
      showfuwudialog: false,
      business: "",
      product: [],
      cartnum: "",
      commentlist: "",
      commentcount: "",
      couponlist: "",
      fuwulist: [],
      pagecontent: "",
      shopset: {},
      sysset: {},
      title: "",
      bboglist: "",
      sharepic: "",
      sharetypevisible: false,
      showposter: false,
      posterpic: "",
      scrolltopshow: false,
      kfurl: "",
      showLinkStatus: false,
      showjiesheng: 0,
      tjdatalist: [],
      showtoptabbar: 0,
      toptabbar_show: 0,
      toptabbar_index: 0,
      scrollToViewId: "",
      scrollTop: 0,
      scrolltab0Height: 0,
      scrolltab1Height: 0,
      scrolltab2Height: 0,
      scrolltab3Height: 0,
      xcx_scheme: false,
      showScheme: false,
      schemeurl: "",
      showprice_dollar: false,
      show_money_price: false,
      //自提商品门店显示
      showNearbyMendian: false,
      longitude: "",
      latitude: "",
      mendianids: [],
      mendian: {},
      mendian_id: 0,
      //自提商品门店显示
      productDetail: [],
    };
  },
  props: {
    // btntype: {
    // 	default: 0
    // },
    // menuindex: {
    // 	default: -1
    // },
    controller: {
      default: "Shop",
    },
    needaddcart: {
      default: true,
    },
    proid: {},
  },
  mounted: function () {
    var that = this;
    that.getdata();
  },
  beforeDestroy() {},
  onUnload: function () {
    clearInterval(interval);
  },

  methods: {
    //proid: that.proid
    getdata: function () {
      var that = this;
      that.loading = true;
      app.get(
        "Shop/product",
        {
          id: that.proid,
          longitude: that.longitude,
          latitude: that.latitude,
          mendian_id: that.mendian_id,
        },
        function (res) {
          that.loading = false;
          if (res.status == 0) {
            app.alert(res.msg);
            return;
          }
          that.textset = app.globalData.textset;
          var product = res.product;
          var pagecontent = JSON.parse(product.detail);
          console.log(pagecontent, "page123");
          that.business = res.business;
          that.product = product;
          that.cartnum = res.cartnum;
          that.commentlist = res.commentlist;
          that.commentcount = res.commentcount;
          that.couponlist = res.couponlist;
          that.fuwulist = res.fuwulist;
          that.pagecontent = pagecontent;
          that.shopset = res.shopset;
          that.sysset = res.sysset;
          that.title = product.name;
          that.isfavorite = res.isfavorite;
          that.showjiesheng = res.showjiesheng || 0;
          that.tjdatalist = res.tjdatalist || [];
          that.showtoptabbar = res.showtoptabbar || 0;
          that.bboglist = res.bboglist;
          that.sharepic = product.pics[0];
          that.xcx_scheme = res.xcx_scheme;
          that.showprice_dollar = res.showprice_dollar;
          that.show_money_price = res.show_money_price;
          if (product.guigedata) {
            that.productDetail = JSON.parse(product.guigedata);
          }
          uni.setNavigationBarTitle({
            title: product.name,
          });
          if (that.product.can_ziti) {
            that.showNearbyMendian = true;
            if (res.bindmendianids.length > 0) {
              that.mendian = res.mendian;
              that.mendianids = res.bindmendianids;
            }
          }

          that.kfurl = "/pages/kefu/index?bid=" + product.bid;
          if (app.globalData.initdata.kfurl != "") {
            that.kfurl = app.globalData.initdata.kfurl;
          }
          if (that.business && that.business.kfurl) {
            that.kfurl = that.business.kfurl;
          }
          if (that.product.product_type == 1) {
            //初始化时清空档案
            app.setCache("_glass_record_id", "");
          }

          that.loaded({
            title: product.sharetitle || product.name,
            pic: product.sharepic || product.pic,
            desc: product.sharedesc || product.sellpoint,
          });
          //需要定位
          if (res.needlocation) {
            app.getLocation(
              function (res) {
                that.latitude = res.latitude;
                that.longitude = res.longitude;
                that.getdata();
              },
              function (error) {
                console.log(error);
              }
            );
          }
          setTimeout(function () {
            let view0 = uni
              .createSelectorQuery()
              .in(that)
              .select("#scroll_view_tab0");
            view0
              .fields(
                {
                  size: true, //是否返回节点尺寸（width height）
                  rect: false, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
                  scrollOffset: false, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
                },
                (res) => {
                  console.log(res);
                  that.scrolltab0Height = res.height;
                }
              )
              .exec();
            let view1 = uni
              .createSelectorQuery()
              .in(that)
              .select("#scroll_view_tab1");
            view1
              .fields(
                {
                  size: true, //是否返回节点尺寸（width height）
                  rect: false, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
                  scrollOffset: false, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
                },
                (res) => {
                  console.log(res);
                  that.scrolltab1Height = res.height;
                }
              )
              .exec();
            let view2 = uni
              .createSelectorQuery()
              .in(that)
              .select("#scroll_view_tab2");
            view2
              .fields(
                {
                  size: true, //是否返回节点尺寸（width height）
                  rect: false, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
                  scrollOffset: false, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
                },
                (res) => {
                  console.log(res);
                  that.scrolltab2Height = res.height;
                }
              )
              .exec();
            that.isLoding = false;
          }, 700);
        }
      );
    },

    detaildialogChange: function () {
      this.$emit("detaildialogChange");
    },

    swiperChange: function (e) {
      var that = this;
      that.current = e.detail.current;
    },
    scroll: function (e) {
      var scrollTop = e.detail.scrollTop;
      //console.log(e)
      var that = this;
      if (scrollTop > 200) {
        that.scrolltopshow = true;
      }
      if (scrollTop < 150) {
        that.scrolltopshow = false;
      }
      if (scrollTop > 100) {
        that.toptabbar_show = true;
      }
      if (scrollTop < 50) {
        that.toptabbar_show = false;
      }
      var height0 = that.scrolltab0Height;
      var height1 = that.scrolltab0Height + that.scrolltab1Height;
      var height2 =
        that.scrolltab0Height + that.scrolltab1Height + that.scrolltab2Height;
      //var height3 = that.scrolltab0Height + that.scrolltab1Height + that.scrolltab2Height + that.scrolltab3Height;
      if (scrollTop >= 0 && scrollTop < height0) {
        //this.scrollToViewId = 'scroll_view_tab0';
        this.toptabbar_index = 0;
      } else if (scrollTop >= height0 && scrollTop < height1) {
        //this.scrollToViewId = 'scroll_view_tab1';
        this.toptabbar_index = 1;
      } else if (scrollTop >= height1 && scrollTop < height2) {
        //this.scrollToViewId = 'scroll_view_tab2';
        this.toptabbar_index = 2;
      } else if (scrollTop >= height2) {
        //this.scrollToViewId = 'scroll_view_tab3';
        this.toptabbar_index = 3;
      }
    },
    posterDialogClose: function () {
      this.showposter = false;
    },
    showfuwudetail: function () {
      this.showfuwudialog = true;
    },
    hidefuwudetail: function () {
      this.showfuwudialog = false;
    },
    showcuxiaodetail: function () {
      this.showcuxiaodialog = true;
    },
    hidecuxiaodetail: function () {
      this.showcuxiaodialog = false;
    },
    getcoupon: function () {
      this.showcuxiaodialog = false;
      this.getdata();
    },
    parsevideo: function () {
      this.isplay = 0;
      uni.createVideoContext("video").stop();
    },
    payvideo: function () {
      this.isplay = 1;
      uni.createVideoContext("video").play();
    },
    showgg1Dialog: function () {
      this.$refs.gg1Dialog.open();
    },
    closegg1Dialog: function () {
      this.$refs.gg1Dialog.close();
    },
  },
};
</script>
<style scoped>
page {
  position: relative;
  width: 100%;
  height: 100%;
}

.dialog-mask {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  bottom: 0px;
  z-index: 10;
}

.dialog {
  position: fixed;
  width: 100%;
  left: 0px;
  bottom: 0px;
  background: #fff;
  z-index: 11;
  border-radius: 20rpx 20rpx 0px 0px;
  overflow: hidden;
  height: 80%;
}

.close {
  position: absolute;
  top: 15%;
  right: 5%;
  z-index: 12;
  background-color: #f1f1f1;
  border-radius: 50%;
  width: 60rpx;
  height: 60rpx;
  text-align: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close .image {
  width: 30rpx;
  height: 30rpx;
}

/* 内容样式 */
.container {
  height: 100%;
}

.swiper-container {
  position: relative;
  height: 750rpx;
  overflow: hidden;
}

.swiper {
  width: 100%;
  height: 750rpx;
  overflow: hidden;
}

.swiper-item-view {
  width: 100%;
  height: 750rpx;
}

.swiper .img {
  width: 100%;
  height: 750rpx;
  overflow: hidden;
}

.imageCount {
  width: 100rpx;
  height: 50rpx;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 40rpx;
  line-height: 50rpx;
  color: #fff;
  text-align: center;
  font-size: 26rpx;
  position: absolute;
  right: 13px;
  bottom: 20rpx;
}

.provideo {
  background: rgba(255, 255, 255, 0.7);
  width: 160rpx;
  height: 54rpx;
  padding: 0 20rpx 0 4rpx;
  border-radius: 27rpx;
  position: absolute;
  bottom: 30rpx;
  left: 50%;
  margin-left: -80rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.provideo image {
  width: 50rpx;
  height: 50rpx;
}

.provideo .txt {
  flex: 1;
  text-align: center;
  padding-left: 10rpx;
  font-size: 24rpx;
  color: #333;
}

.videobox {
  width: 100%;
  height: 750rpx;
  text-align: center;
  background: #000;
}

.videobox .video {
  width: 100%;
  height: 650rpx;
}

.videobox .parsevideo {
  margin: 0 auto;
  margin-top: 20rpx;
  height: 40rpx;
  line-height: 40rpx;
  color: #333;
  background: #ccc;
  width: 140rpx;
  border-radius: 25rpx;
  font-size: 24rpx;
}

.header {
  width: 100%;
  padding: 20rpx 3%;
  background: #fff;
}

.header .price_share {
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header .price_share .price {
  display: flex;
  align-items: flex-end;
}

.header .price_share .price .f1 {
  font-size: 50rpx;
  color: #51b539;
  font-weight: bold;
}

.header .price_share .price .f2 {
  font-size: 26rpx;
  color: #c2c2c2;
  text-decoration: line-through;
  margin-left: 30rpx;
  padding-bottom: 5px;
}

.header .price_share .share {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60rpx;
}

.header .price_share .share .img {
  width: 32rpx;
  height: 32rpx;
  margin-bottom: 2px;
}

.header .price_share .share .txt {
  color: #333333;
  font-size: 20rpx;
}

.header .points {
  padding: 10rpx 0;
  color: #ff7a18;
}

.header .title {
  color: #000000;
  font-size: 32rpx;
  line-height: 46rpx;
  font-weight: bold;
  margin-top: 5rpx;
}

.title-tags {
  background: linear-gradient(to right, #03bc01, #5fc55f);
  color: #fff;
  padding: 6rpx 10rpx;
  font-size: 22rpx;
  border-radius: 10rpx;
  margin: 0rpx 15rpx 15rpx 0;
}

.header .price_share .title {
  display: flex;
  align-items: flex-end;
}

.header .sellpoint {
  font-size: 28rpx;
  color: #f16600;
  padding-top: 20rpx;
}

.header .sales_stock {
  display: flex;
  justify-content: space-between;
  height: 60rpx;
  line-height: 60rpx;
  margin-top: 30rpx;
  font-size: 24rpx;
  color: #777777;
}

.header .commission {
  display: inline-block;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
  font-size: 20rpx;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 20rpx;
}

.header .upsavemoney {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
  font-size: 20rpx;
  height: 70rpx;
  padding: 0 20rpx;
}

.cuxiaodiv {
  background: #fff;
  margin-top: 20rpx;
  padding: 0 3%;
}

.fuwudialog-content {
  font-size: 24rpx;
}

.fuwudialog-content .f1 {
  color: #333;
  height: 80rpx;
  line-height: 80rpx;
  font-weight: bold;
}

.fuwudialog-content .f1:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-top: -4rpx;
  margin-right: 10rpx;
  width: 24rpx;
  height: 24rpx;
  background: url("")
    no-repeat;
  background-size: 24rpx auto;
}

.fuwudialog-content .f2 {
  color: #777;
}

.cuxiaopoint {
  width: 100%;
  font-size: 24rpx;
  color: #333;
  height: 88rpx;
  line-height: 88rpx;
  padding: 12rpx 0;
  display: flex;
  align-items: center;
}

.cuxiaopoint .f0 {
  color: #555;
  font-weight: bold;
  height: 32rpx;
  font-size: 24rpx;
  padding-right: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cuxiaopoint .f1 {
  margin-right: 20rpx;
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}

.cuxiaopoint .f1 .t {
  margin-left: 10rpx;
  border-radius: 3px;
  font-size: 24rpx;
  height: 40rpx;
  line-height: 40rpx;
  padding-right: 10rpx;
  flex-shrink: 0;
  overflow: hidden;
}

.cuxiaopoint .f1 .t0 {
  display: inline-block;
  padding: 0 5px;
}

.cuxiaopoint .f1 .t1 {
  padding: 0 4px;
}

.cuxiaopoint .f2 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 32rpx;
  height: 32rpx;
}

.cuxiaopoint .f2 .img {
  width: 32rpx;
  height: 32rpx;
}

.cuxiaodiv .cuxiaoitem {
  border-bottom: 1px solid #e6e6e6;
}

.cuxiaodiv .cuxiaoitem:last-child {
  border-bottom: 0;
}

.popup__container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 10;
  background: #fff;
}

.popup__overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  opacity: 0.3;
  background: #000;
}

.popup__modal {
  width: 100%;
  position: absolute;
  bottom: 0;
  color: #3d4145;
  overflow-x: hidden;
  overflow-y: hidden;
  opacity: 1;
  padding-bottom: 20rpx;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  z-index: 12;
  min-height: 600rpx;
  max-height: 1000rpx;
}

.popup__title {
  text-align: center;
  padding: 30rpx;
  position: relative;
  position: relative;
}

.popup__title-text {
  font-size: 32rpx;
}

.popup__close {
  position: absolute;
  top: 34rpx;
  right: 34rpx;
}

.popup__content {
  width: 100%;
  max-height: 880rpx;
  overflow-y: scroll;
  padding: 20rpx 0;
}

.service-item {
  display: flex;
  padding: 0 40rpx 20rpx 40rpx;
}

.service-item .prefix {
  padding-top: 2px;
}

.service-item .suffix {
  padding-left: 10rpx;
}

.service-item .suffix .type-name {
  font-size: 28rpx;
  color: #49aa34;
  margin-bottom: 10rpx;
}

.shop {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  margin-top: 20rpx;
  padding: 20rpx 3%;
  position: relative;
  min-height: 100rpx;
}

.shop .p1 {
  width: 90rpx;
  height: 90rpx;
  border-radius: 6rpx;
  flex-shrink: 0;
}

.shop .p2 {
  padding-left: 10rpx;
}

.shop .p2 .t1 {
  width: 100%;
  height: 40rpx;
  line-height: 40rpx;
  overflow: hidden;
  color: #111;
  font-weight: bold;
  font-size: 30rpx;
}

.shop .p2 .t2 {
  width: 100%;
  height: 30rpx;
  line-height: 30rpx;
  overflow: hidden;
  color: #999;
  font-size: 24rpx;
  margin-top: 8rpx;
}

.shop .p4 {
  height: 64rpx;
  line-height: 64rpx;
  color: #ffffff;
  border-radius: 32rpx;
  margin-left: 20rpx;
  flex-shrink: 0;
  padding: 0 30rpx;
  font-size: 24rpx;
  font-weight: bold;
}

.detail {
  min-height: 200rpx;
}

.detail_title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60rpx;
  margin-bottom: 30rpx;
}

.detail_title .t0 {
  font-size: 28rpx;
  font-weight: bold;
  color: #222222;
  margin: 0 20rpx;
}

.detail_title .t1 {
  width: 12rpx;
  height: 12rpx;
  background: rgba(253, 74, 70, 0.2);
  transform: rotate(45deg);
  margin: 0 4rpx;
  margin-top: 6rpx;
}

.detail_title .t2 {
  width: 18rpx;
  height: 18rpx;
  background: rgba(253, 74, 70, 0.4);
  transform: rotate(45deg);
  margin: 0 4rpx;
}

.paramitem {
  display: flex;
  border-bottom: 1px solid #f5f5f5;
  padding: 20rpx;
}

.paramitem .f1 {
  width: 30%;
  color: #666;
}

.paramitem .f2 {
  color: #333;
}

.paramitem:last-child {
  border-bottom: 0;
}

.xihuan {
  height: auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20rpx 160rpx;
  margin-top: 20rpx;
}

.xihuan-line {
  height: auto;
  padding: 0;
  overflow: hidden;
  flex: 1;
  height: 0;
  border-top: 1px solid #eee;
}

.xihuan-text {
  padding: 0 32rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xihuan-text .txt {
  color: #111;
  font-size: 30rpx;
}

.xihuan-text .img {
  text-align: center;
  width: 36rpx;
  height: 36rpx;
  margin-right: 12rpx;
}

.prolist {
  width: 100%;
  height: auto;
  padding: 8rpx 20rpx;
}

.scrolltop {
  position: fixed;
  bottom: 160rpx;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border-radius: 50%;
  padding: 12rpx 10rpx 8rpx 10rpx;
  z-index: 9;
}

.scrolltop .image {
  width: 100%;
  height: 100%;
}

.ggdiaplog_close {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  bottom: -100rpx;
  left: 50%;
  margin-left: -25rpx;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  padding: 8rpx;
}

.copybtn {
  text-align: center;
  margin-top: 30rpx;
  padding: 15rpx 20rpx;
  border-radius: 50rpx;
  color: #fff;
}

.member {
  position: relative;
  border-radius: 8rpx;
  border: 1rpx solid #fd4a46;
  overflow: hidden;
  box-sizing: content-box;
}

.member_lable {
  height: 100%;
  font-size: 22rpx;
  color: #fff;
  background: #fd4a46;
  padding: 0 15rpx;
}

.member_value {
  padding: 0 15rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #fd4a46;
}

.flex-s {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.moneyprice {
  font-size: 26rpx;
  font-weight: 400;
  padding: 4rpx 10rpx;
  min-width: 90rpx;
  text-align: center;
  margin-left: 10rpx;
  border-radius: 20rpx;
}

.isloding {
  text-align: center;
  color: gray;
  font-style: italic;
}
</style>
